'use strict'
const path = require('path')
// 引入时先判断是否为浏览器环境，避免 Node 环境报错
let defaultSettings = {}
try {
  // 尝试加载 settings.js，若包含浏览器 API 可能报错，用 try/catch 捕获
  defaultSettings = require('./src/settings.js') || {}
} catch (e) {
  // 捕获到错误时使用默认配置
  defaultSettings = { title: '绿度银行管理平台' }
}
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')


function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || '绿度银行管理平台' // 页面标题

// 端口配置
const port = process.env.port || process.env.npm_config_port || 9528 // 开发环境端口


module.exports = {
  /**
   * 部署应用包时的基本 URL
   * 详细：https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development', // 开发环境下开启 ESLint 校验
  productionSourceMap: false, // 生产环境不生成 sourceMap

  // 开发服务器配置
  devServer: {
    port: port,
    open: true, // 自动打开浏览器
    overlay: {
      warnings: false,
      errors: true // 错误时显示全屏覆盖层
    },
    before: require('./mock/mock-server.js') // 引入 mock 服务
  },

  // Webpack 配置（合并写法，避免重复定义）
  configureWebpack: {
    // 提供应用标题，可在 index.html 中注入
    name: name,
    resolve: {
      alias: {
        '@': resolve('src') // 别名配置，@ 指向 src 目录
      }
    },
    // 合并插件配置（之前重复定义，这里统一整合）
    plugins: [
      new MonacoWebpackPlugin(), // monaco-editor 插件
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(js|css)$'), // 只压缩 js 和 css 文件
        threshold: 10240, // 文件大小超过 10KB 才压缩
        minRatio: 0.8 // 压缩率小于 0.8 才压缩
      })
    ]
  },

  // 链式 Webpack 配置
  chainWebpack(config) {
    // 删除 preload 和 prefetch 插件（按需加载优化）
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')

    // 配置 svg-sprite-loader 处理图标
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons')) // 排除 icons 目录，用自定义规则处理
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons')) // 只处理 icons 目录下的 svg
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]' // 定义图标 symbolId 格式
      })
      .end()

    // 配置 vue-loader 保留模板中的空格
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    // 开发环境下配置 sourceMap
    config
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    // 生产环境下的优化配置
    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          // 配置 script-ext-html-webpack-plugin 优化脚本加载
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              inline: /runtime\..*\.js$/ // 内联 runtime 脚本
            }])
            .end()

          // 代码分割配置
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // 只打包初始依赖的第三方库
                },
                elementUI: {
                  name: 'chunk-elementUI', // 将 elementUI 单独打包
                  priority: 20, // 权重高于 libs 和 app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // 自定义组件提取
                  minChunks: 3, // 至少被引用 3 次才提取
                  priority: 5,
                  reuseExistingChunk: true // 复用已有的 chunk
                }
              }
            })
          // 单独提取 runtime 代码
          config.optimization.runtimeChunk('single')
        }
      )
  }

  // 如需开启 px2rem 配置，取消下面注释并安装 postcss-px2rem
  // css: {
  //   loaderOptions: {
  //     postcss: {
  //       plugins: [
  //         require('postcss-px2rem')({
  //           remUnit: 192 // 根据设计稿调整，1rem = 192px
  //         })
  //       ]
  //     }
  //   }
  // }
}